<template>
  <el-dialog
    title="新建模块"
    width="600px"
    :visible="dialogflag"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    style="margin-top: 200px;
"
  >
    <el-form
      label-position="left"
      label-width="100px"
      size="medium"
      class="dialogForm form-left"
      :model="dialogForm"
      :rules="rules"
      ref="form"
    >
      <el-form-item label="模块名" prop="moduleName">
        <el-input placeholder="模块名" v-model="dialogForm.moduleName">
        </el-input>
      </el-form-item>
      <el-form-item label="模块标识" prop="moduleLabel">
        <el-input placeholder="模块标识" v-model="dialogForm.moduleLabel">
        </el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button size="medium" @click="handleClose" class="bootonclose">取 消</el-button>
      <el-button
        size="medium"
        type="primary"
        @click="handleOk"
        class="bootonok"
      >
        保存
      </el-button>
    </div>
    <img src="../../../../../assets/images/lodingBar.png" alt="" class="lodingBar">

  </el-dialog>
</template>

<script>
import { add, } from "@/api/metadata/metadata";
export default {
  name: "Logdialog",
  props: {
    dialogflag: {
      type: Boolean,
    },
  },
  emits: ["closedia"],
  data() {
    return {
      dialogForm: {
        moduleName: "",
        moduleLabel: "",
        moduleId:"",
      },
      options: [],
      rules: {
        moduleName: [
          { required: true, message: "请输入模块名", trigger: "blur" },
        ],
        moduleLabel: [
          { required: true, message: "请输入模块标识", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
  },
  methods: {
    handleClose() {
      this.$emit("closedia");
    },
    // 确定
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
           add(this.dialogForm).then(response => {
                if(response.success){
                    this.$modal.msgSuccess("新建成功");
                     //发请求关闭窗口
                    this.$emit("closedia");
                 }
               }).catch(err => {
                  //  this.$message.error(err.message)
                   console.log(err);
               })
         

        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
::v-deep .el-form {
  padding: 20px;
} 
::v-deep .el-dialog__body {
  padding: 0px 20px;
}
::v-deep .el-dialog__header {
  padding: 0;
  height: 70px;
  line-height: 70px;
  background-color:  $labelColor;
  position: relative;
}
::v-deep .el-dialog__header span {
  color: #fff;
  margin-left: 30px;
  font-size: 18px;
} 
::v-deep .el-dialog__headerbtn{
  top:50%;
  right:20px;
  transform: translate(0,-50%);
  z-index: 2;
}
.lodingBar{
  position: absolute;
  height: 70px;
  top: 0;
  right: 0;
  z-index: 1;
}

.dialog-footer {
  padding-bottom: 20px;
  text-align: center;
}
::v-deep .el-form-item__label{
  font-size: 14px;
  color: #7483a6;
}
::v-deep .el-dialog__close{
  border: 1px solid #fff;
  color: #fff;
  border-radius: 50%;
}
.bootonclose{
  width: 122px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #e8eaec;
  border-radius:4px ;
  font-size: 16px;
  color:  $labelColor;
}
.bootonok{
   width: 122px;
  height: 40px;
  background-color: $labelColor;
  border-radius:4px ;
  color:  #fff;
  margin-left: 20px;
  font-size: 16px;
}
</style>
